<template>
  <div>
    <div>
      <!-- 头部 -->
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="人员搜索:">
            <el-input
              v-model="formInline.userName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="角色:">
            <el-select v-model="formInline.isRepair" placeholder="请选择">
              <el-option label="运营员" value="false"></el-option>
              <el-option label="维修员" value="true"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-search"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="result">
        <!-- 主题内容 -->
        <div class="body">
          <template>
            <el-table :data="tableData" size="small" style="width: 100%">
              <el-table-column label="序号" width="80px">
                <template slot-scope="scop">
                  {{ pageIndex * 10 + scop.$index + 1 - 10 }}
                </template>
              </el-table-column>
              <el-table-column prop="userName" label="人员名称">
              </el-table-column>
              <el-table-column prop="roleName" label="角色"> </el-table-column>
              <el-table-column prop="mobile" label="联系电话">
              </el-table-column>
              <el-table-column prop="workCount" label="完成工单(本月)">
              </el-table-column>
              <el-table-column prop="progressTotal" label="进行中工单">
              </el-table-column>
              <el-table-column prop="cancelCount" label="拒绝工单(本月)">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="ReplenishmentListA(scope.row)"
                    type="text"
                    size="small"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="title">
              <span class="text"
                >共 {{ total }} 条记录 第{{ pageIndex }}/{{ totalPage }}页</span
              >
              <div class="pageChange">
                <el-button size="small" :disabled="disabled" @click="pageUp"
                  >上一页</el-button
                >
                <el-button size="small" @click="pageDown">下一页</el-button>
              </div>
            </div>
          </template>
        </div>
        <!-- 弹窗 -->
        <el-dialog title="人员详情" :visible.sync="ReplenishmentList">
          <el-form label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="8"
                ><div>
                  人员名称:
                  <span style="padding-left: 20px">{{ LList.userName }}</span>
                </div></el-col
              >
              <el-col :span="8"
                ><div>
                  角色 :
                  <span style="padding-left: 20px">{{ LList.roleName }}</span>
                </div></el-col
              >
              <el-col :span="8"
                ><div>
                  联系电话 :
                  <span style="padding-left: 20px">{{ LList.mobile }}</span>
                </div></el-col
              >
              <el-col :span="8"
                ><div>
                  负责区域 :
                  <span style="padding-left: 20px">
                    {{ LList.regionName }}
                  </span>
                </div></el-col
              >
            </el-row>
            <table
              width="600"
              height="250"
              border="1"
              style="text-align: center"
            >
              <tr>
                <th></th>
                <th>总工单数</th>
                <th>拒绝工单</th>
                <th>完成工单</th>
                <th>进行中工单</th>
              </tr>
              <tr>
                <td>本周</td>
                <td>{{Zhou.total}}</td>
                <td>{{ Zhou.cancelCount }}</td>
                <td>0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>本月</td>
                <td>{{Yue.total}}</td>
                <td>{{ Yue.cancelCount }}</td>
                <td>0</td>
                <td>0</td>
              </tr>
              <tr>
                <td>本年</td>
                <td>{{Nian.total}}</td>
                <td>{{ Nian.cancelCount }}</td>
                <td>0</td>
                <td>0</td>
              </tr>
            </table>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  userService,
  userSearch,
  message,
  zhou,
  yue,
  nian,
} from "@/api/user.js";

export default {
  computed: {
    disabled() {
      if (this.pageIndex < 2) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    async ReplenishmentListA(row) {
      this.ReplenishmentList = true;
      // console.log(row);
      this.Replenishment = row;
      this.UserId = this.Replenishment.userId;
      console.log(this.UserId);
      const { data } = await message(this.UserId);
      console.log(data);
      this.LList = data;
      const A = await zhou(this.UserId);
      console.log(A.data);
      this.Zhou = A.data;
      const B = await yue(this.UserId);
      this.Yue = B.data;
      const C = await nian(this.UserId);
      this.Nian = C.data;
    },
    async onSubmit() {
      const { data } = await userSearch(this.formInline);
      this.tableData = data.currentPageRecords;
      this.formInline = {
        userName: "",
        isRepair: "",
      };
      this.tableData = data.currentPageRecords;
      this.total = data.totalCount;
      this.pageIndex = data.pageIndex;
      this.totalPage = data.totalPage;
    },
    pageUp() {
      this.userService(this.pageIndex - 1);
    },
    pageDown() {
      this.userService(+this.pageIndex + 1);
    },
    async userService(id) {
      const { data } = await userService(id);
      console.log(data);
      this.tableData = data.currentPageRecords;
      this.total = data.totalCount;
      this.pageIndex = data.pageIndex;
      this.totalPage = data.totalPage;
    },
  },
  name: "ArticleIndex",
  data() {
    return {
      Nian: "",
      Yue: "",
      Zhou:'',
      LList: "",
      UserId: "",
      dialogVisibleCC: false,
      Listt: [],
      ReplenishmentList: false,
      isReplenish: true,
      num: 10,
      formInline: {
        userName: "",
        isRepair: "",
        roleId: "",
      },
      Replenishment: "",
      workCard: false,
      channelList: [],
      channelListLast: [],
      people: [],
      goodsList: false,
      newCard: false,
      formRules: {
        innerCode: [
          { required: true, message: "编号要记得填哦", trigger: "blur" },
        ],
        desc: [{ required: true, message: "备注要记得写哦", trigger: "blur" }],
        assignorId: [{ required: true, trigger: "blur" }],
      },
      form: {
        assignorId: "",
        createType: 1,
        innerCode: "",
        userId: 1,
        productType: "",
        desc: "",
        details: [],
      },
      configNumber: "",
      // formLabelWidth: '120px',
      tableData: [],
      total: 0,
      pageIndex: 1,
      totalPage: "",
      ABC: "",
      // disabled: false
    };
  },
  async created() {
    const { data } = await userService();
    console.log(data);
    this.tableData = data.currentPageRecords;
    this.total = data.totalCount;
    this.pageIndex = data.pageIndex;
    this.totalPage = data.totalPage;
  },
};
</script>

<style lang="scss" scoped>
.no {
  // display: flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
  .img {
    margin-right: 60px;
  }
  .icon {
    margin-left: 15px;
  }
  span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
}
::v-deep [data-v-5b5b10cc] .el-dialog__body {
  padding: 20px 30px;
}
.a1 {
  width: 79%;
}
::v-deep .el-dialog {
  border-radius: 25px;
  width: 40%;
  // height: 530px;
}
::v-deep .el-col {
  height: 38px;
  // padding: 15px;
}
::v-deep .el-dialog__body {
  padding: 30px 60px;
}
.new {
  margin-right: 10px;
}
.title {
  padding-top: 20px;
  display: flex;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 28px;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px !important;
    color: #dbdfe5 !important;
  }
  .pageChange {
    margin-right: 90px;
  }
}
.search {
  display: flex;
  height: 64px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  .demo-form-inline {
    padding-top: 30px;
  }
}
</style>
